<template>
   <div class="cate-box">
    <!-- 头部 -->
    <van-nav-bar title="商品分类" left-arrow @click-left="onClickLeft" />
    <!-- 内容部分 -->
    <main class="content">
     <!-- 渲染左侧导航栏 -->
     <van-sidebar v-model="activeKey" @change="changeCate">
      <van-sidebar-item
       v-for="(item, index) in cateList"
       :key="index"
       :title="item"
      />
     </van-sidebar>
     <!-- 把左侧导航栏所对应的品牌渲染到右边区域 -->
     <van-grid :column-num="4">
      <van-grid-item v-for="(item,index) in goodsList" :key="index" :text="item.brand" @click="goBrand(item)"/>
     </van-grid>
    </main>
    <!-- 底部 -->
    <FooterBarVue></FooterBarVue>
   </div>
  </template>
  
  <script>
  import FooterBarVue from "@/components/FooterBar.vue";
  import axios from "axios";
  export default {
   name: "Category",
   data() {
    return {
     // 当前导航项的索引
     activeKey: 0,
     cateList: [],
     goodsList: [],
     category:'手机'
    };
   },
   created() {
    let getCateList = () => {
     return axios({
      url: "http://121.89.205.189:3001/api/pro/categorylist",
     });
    };
    let getCateGoodsList = () => {
     return axios({
      url: "http://121.89.205.189:3001/api/pro/categorybrandlist",
      params: {
       category: this.category,
      },
     });
    };
    axios.all([getCateList(), getCateGoodsList()]).then(
     axios.spread((cateRes, goodsRes) => {
      if (cateRes.data.code == 200) {
       // console.log(cateRes.data);
       this.cateList = cateRes.data.data;
      }
      if(goodsRes.data.code==200){
       this.goodsList=goodsRes.data.data
      }
     })
    );
   },
   components: {
    FooterBarVue,
   },
   methods: {
    onClickLeft() {
     // console.log("返回去了哦！");
     this.$router.back()
     // Toast('返回');
    },
    changeCate(index) {
     this.category=this.cateList[index]
     // console.log(this.category);
     axios({
      url: "http://121.89.205.189:3001/api/pro/categorybrandlist",
      params: {
       category: this.category,
    